<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 300px;
            border: 4px solid skyblue;
        }
        
        .red {
            color: red;
        }
        
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <button id="btn">获取随机彩票信息</button>
    <div id="box">
        <span class="red"></span><span class="blue"></span>
    </div>
    <script>
        window.onload = function() {
            // 1.升级函数，完成去重的操作
            // 2.升级需求，6红球 1-33，1篮球 1-16
            // 3.升级需求：给红球和篮球添加样式

            var btn = document.querySelector("button");
            var red_span = document.querySelector(".red");
            var blue_span = document.querySelector(".blue");

            // console.log(document.querySelector("button"));
            btn.onclick = function() {
                // 生成红球随机数的数组
                let red_arr = getRandom(6, 1, 33);
                // 生成蓝球随机数的数组
                let blue_arr = getRandom(1, 1, 17);
                // 将红球和蓝球数组合并
                var arr = red_arr.concat(blue_arr);
                // 将彩票信息写入历史记录中
                window.history.pushState(arr, "");
                // 将红球数组显示在span中
                red_span.innerHTML = red_arr;
                // 将蓝球数组显示在span中
                blue_span.innerHTML = "," + blue_arr;
                console.log(red_arr, blue_arr);
            }

            window.onpopstate = function(ev) {
                    // 如果没有历史记录直接程序结束
                    if (ev.state == null) {
                        return
                    }
                    // 获取历史记录
                    let arr = ev.state;
                    // 生成红球随机数的数组
                    let red_arr = arr.slice(0, arr.length - 1);
                    // 生成蓝球随机数的数组
                    let blue_arr = arr.slice(arr.length - 1);
                    // 将红球数组显示在span中
                    red_span.innerHTML = red_arr;
                    // 将蓝球数组显示在span中
                    blue_span.innerHTML = ',' + blue_arr;
                    console.log(red_arr, blue_arr);

                }
                //count 个数 
                //start 随机的开始值
                //end   随机的结束值
            function getRandom(count, start, end) {
                var numArr = [];
                for (var i = 0; i < count; i++) {
                    var num1 = Math.floor(Math.random() * (end - start) + start);
                    if (numArr.indexOf(num1) == -1) {
                        numArr.push(num1);
                    } else {
                        i--;
                    }
                }
                return numArr;
            }

        }
    </script>
</body>

</html>